<template>
  <div class="shc-total">
    <div class="coursename">
      {{ singleCourse[0].coursename }}
    </div>
    <div class="video">
      <video
        v-if="coursev == null || coursev.length <= 0"
        id="vid"
        :src="url + singleCourse[0].coursev"
        style="width: 870px; height: 490px"
        controls
      >
        1
      </video>
      <video
        v-else
        id="vid"
        :src="url + coursev"
        style="width: 870px; height: 490px"
        controls
      >
        1
      </video>
      <div class="hclist">
        <h2>课程列表</h2>
        <ul>
          <li v-for="sc in singleCourse" :key="sc.courseid">
            <div @click="changehcourse(sc.courseid)">{{ sc.courselist }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="reply">
      <div>{{ replies.length }}条评论</div>
      <div>
        <div class="replylist" v-for="reply in replies" :key="reply.replyid">
          <img v-if="reply.userphoto != null" :src="url + reply.userphoto" alt="" />
          <img v-else src="@/assets/img/user.png" alt=""/>
          <div>
            <p>{{ reply.replydatetime }}</p>
            <p>{{ reply.content }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="freply">
      <h3>发表评论</h3>
      <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入内容"
        v-model="content"
      >
      </el-input>
      <el-button type="primary" plain @click="addReply">评论</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getCourseByCoursename, getReplyBycoursename, addReply, changevideo } from '@/api/courseAPI.js'
export default {
  props: {
    coursename: {
      type: String,
    },
  },
  data() {
    return {
      singleCourse: [],
      replies: [],
      url: 'http://rnn0pzf74.hd-bkt.clouddn.com/',
      content: '',
      coursev: ''
    }
  },
  created() {
    const that = this
    that.getHCourseByName()
    that.getHReplyByName()
  },
  methods: {
    //根据课程名查询课程
    async getHCourseByName() {
      const that = this
      const { data: res } = await getCourseByCoursename(that.coursename)
      console.log('查到该课', res)
      that.singleCourse = res.data
    },
    //根据课程名查询评论
    async getHReplyByName() {
      const that = this
      const { data: res } = await getReplyBycoursename(that.coursename)
      console.log('查到评论', res)
      that.replies = res.data
    },
    //添加评论
    async addReply() {
      const that = this
      const { data: res } = await addReply(that.content,that.singleCourse[0].coursename)
      if (res.code == 200) {
        console.log('评论成功', res)
        //清空
        that.content = ''
        //重新查询评论
        that.getHReplyByName()
      } else {
        that.$message.warning(res.msg)
      }
    },
    //根据点击课程切换视频
    async changehcourse(courseid) {
      const that = this
      const { data: res } = await changevideo(courseid, that.coursename)
      console.log("切换视频查到信息",res);
      console.log('切换完更换视频前',that.coursev);
      if(res.code == 200){
        that.coursev = res.data.coursev
        console.log('切换完更换视频后',that.coursev);
      }else{
        that.$message.warning(res.msg)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.shc-total {
  width: 100%;
  background-color: #eee;
  .coursename {
    display: flex;
    margin-left: 40%;
    font-size: 36px;
    font-weight: bold;
    color: rgb(50, 144, 233);
  }
  .video {
    text-align: center;
    display: flex;
    margin-left: 20%;
  }
  .hclist {
    margin-left: 0;
    width: 400px;
    height: 500px;
    overflow: hidden;
    background-color: rgb(80, 105, 138);
    ul {
      li {
        list-style: none;
        margin-right: 30px;
        font-size: 24px;
        cursor: pointer;
      }
    }
  }
  .reply {
    width: 870px;
    margin-left: 20%;
    margin-top: 20px;
    font-size: 26px;
    border-bottom: 1px solid rgb(31, 31, 31);
    background-color: rgb(255, 255, 255);
    .replylist {
      display: flex;
      margin: 20px 0 0 20px;
      img {
        width: 50px;
        height: 50px;
      }
      div {
        width: 100%;
        height: 100%;
        p {
          font-size: 20px;
          text-align: center;
          margin-top: -5px;
          font-weight: lighter;
        }
      }
    }
  }
  .freply {
    width: 870px;
    margin-left: 20%;
  }
}
</style>
